<template>
  <x-dialog
    :title="name"
    :describe="describe"
    width="85.333vw"
    :loading="loading"
    @on-submit="onSubmit"
    @on-close="onClose"
  >
    <div
      v-for="x in list"
      :key="x.id"
      class="form-item"
      :class="{ flex: x.style !== 1 }"
    >
      <label
        class="label"
        :class="{ block: x.style === 1, 'mb-2': x.style === 1 }"
      >
        {{ x.name }}
      </label>
      <x-textarea
        v-if="x.type === 1"
        v-model:value="x.value"
        :placeholder="`请输入${x.name}`"
      />
      <template v-else-if="[3, 4].includes(x.type)">
        <x-buttons
          v-if="x.style === 1"
          v-model="x.value"
          :options="x.options"
          :multiple="x.type === 4"
        />
        <x-select
          v-else
          v-model="x.value"
          :options="x.options"
          :placeholder="`请选择${x.name}`"
          :multiple="x.type === 4"
        />
      </template>
      <input
        v-else
        v-model="x.value"
        type="text"
        class="field"
        :placeholder="`请输入${x.name}`"
      />
    </div>
  </x-dialog>
</template>

<script
  lang="ts"
  setup
  name="XForm"
>
import { getForm, putForm, getLastFill } from '@/apis/form'
import { useTost } from '@/utils/comps'
import { useTtsaStore } from '@/store/ttsa'

// eslint-disable-next-line vue/require-prop-types
const props = defineProps(['id', 'isNav'])

const emit = defineEmits(['unmount'])

const onClose = () => {
  if (!props.isNav) {
    const ttsaStore = useTtsaStore()
    ttsaStore.next()
  }
  emit('unmount')
}

const name = ref('')

const describe = ref('')

const list = ref([])

const loading = ref(false)

// 0=单行，1=多行，2=图片，3=单选，4=多选
onBeforeMount(async () => {
  loading.value = true
  const res = await getForm(props.id)
  loading.value = false
  // interval
  // interval_type
  name.value = res.name
  describe.value = res.description
  const formData = await getLastFill(props.id)
  list.value = res.params.map((item) => {
    let value = item.type === 4 ? [] : ''
    const itemData = formData[item.name]
    if (itemData) {
      if (item.type === 3) {
        const pi = item.options.find((n) => n.name === itemData)
        value = pi.value
      } else if (item.type === 4) {
        const map = itemData.split('丨'),
          mapOpt = item.options.reduce((r, c) => ({ ...r, [c.name]: c.value }), {})
        value = map.map((m) => mapOpt[m])
      } else {
        value = itemData
      }
    }
    return { ...item, value }
  })
  if (res.interval_type === 2 && res.interval) {
    setTimeout(onClose, res.interval * 1000)
  }
})

const getValue = (item) => {
  if (item.type === 3) {
    const pi = item.options.find((n) => n.value === item.value)
    return pi.name
  } else if (item.type === 4) {
    const map = item.options.reduce((r, c) => ({ ...r, [c.value]: c.name }), {})
    return item.value.map((n) => map[n]).join('丨')
  } else {
    return item.value
  }
}

const onSubmit = () => {
  const params = []
  for (let i = 0; i < list.value.length; i++) {
    const { must, value, name, options } = list.value[i]
    if (must && (value === '' || value.length < 1)) {
      useTost(`请${options && options.length ? '选择' : '输入'}${name}~`)
      return
    }
    params.push({ name, value: getValue(list.value[i]) })
  }
  // console.lo
  loading.value = true
  putForm({ table_id: props.id, params })
    .then((data) => {
      useTost('提交成功')
      onClose()
    })
    .finally(() => (loading.value = false))
}
</script>

<style
  scoped
  lang="scss"
>
:deep(.form-item) {
  @apply items-baseline;

  &+.form-item {
    margin-top: 15px;
  }

  >.label {
    width: 5em;
    text-align: justify;
    text-align-last: justify;
    margin-right: 7.5px;
    font-size: 12px;
    line-height: 17px;
  }

  /* .field,
  .x-textarea-wrap {
    background-color: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 1);
    border-radius: 6px;

    &:focus {
      background-color: rgba(0, 0, 0, 0.45);
    }

    &:has(.x-textarea:focus) {
      background-color: rgba(0, 0, 0, 0.45);
    }
  } */

  .field {
    @apply flex-1;
    font-size: 12px;
    line-height: 17px;
    padding: 9px 10px;
    resize: none;
    border-radius: 6px;
  }

  .x-textarea {
    padding-left: 10px;
  }
}
</style>
